<!--  -->
<template>
  <div class="app-adminlist">
    <top-header></top-header>
    <el-table :data="adminList" style="width: 100%">
      <el-table-column prop="user_name" label="姓名" align="center" width="180">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="注册日期"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="city" label="地址" align="center" width="180">
      </el-table-column>
      <el-table-column prop="admin" label="权限" align="center">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import TopHeader from "./TopHeader";
import { getAdminList, getTotalAdmins } from "../data/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    "top-header": TopHeader,
  },
  data() {
    //这里存放数据
    return {
      limit: 10,
      pageSize: 1,
      total: 0,
      adminList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* 获取管理员总数 */
    getTotalAdminsCount: async function () {
      let result = await getTotalAdmins();
      this.total = result.count;
    },
    /* 获取管理员列表 */
    getAdminListData: async function () {
      let result = await getAdminList({
        limit: this.limit,
        offset: (this.pageSize - 1) * this.limit, // (1-1)*3...(3-1)*3
      });
      // { status:1,data:[...]}
      this.adminList = result.data;
    },
    /* 每页的数量发生变化 */
    handleSizeChange: function (value) {
      this.limit = value;
      this.getAdminListData();
    },
    // 页码 发生的变化
    handleCurrentChange: function (value) {
      this.pageSize = value;
      this.getAdminListData();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getAdminListData();
    this.getTotalAdminsCount();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
</style>